<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鸡音盒</title>
  <style>
    body{
        background-color: rgba(201, 203, 197, 0.897);
    }
    #zhuti{
        width: 90%;
        height: 90%;
        margin: 0 auto;
        box-sizing: border-box;
        border-radius: 8px;
        background-color: #fff;
    }
     ul{
        /* width: 90%;
        height: 90%; */
        list-style: none;
     }
     li{
        float: left;
        width: 100px;
        height: 50px;
        border-radius: 8px;
        background-color: rgb(39, 196, 133);
        text-align: center;
        font-size: 18px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        line-height: 50px;
        margin-left: 10px;
        margin-bottom: 10px;
     }
     li:hover{
        background-color: rgb(32, 184, 105);
     }
     img{
        
        text-align: center;
        margin: 0 auto;
        margin-left: 20px;
        width: 300px;
        height:200px;
     }
     h1{
        margin: 0 auto;

        width: 90%;
        height: 70px;
        background-color: rgb(36, 194, 141);
        border-radius: 10px;
     }
     span{
        display: block;
        font-size: 14px;
        color: black;
     }
  </style>

</head>

<>
    <h1 style="text-align: center;color:rgb(241, 241, 241)">鸡音盒2.0<br><span>作者：ikun冀哥</span></h1>
    <!-- <img src="./img/ji.webp" alt=""> -->
<img src="./img/cxk.gif" alt="" style="height:300px">

      <div id="zhuti">
       <ul class="jj">
         <li  m="j">鸡</li>
         <li  m="n">你</li>
         <li  m="t">太</li>
         <li  m="m">美</li>
         <li  m="jntm">鸡你太美</li>
         <li  m="ngm">你干嘛</li>
         <li  m="xxj">谢谢鸡</li>
         <li  m="esj">二手鸡</li>
         <li  m="yhhmgn">哟哎嘛干你</li>
         <li  m="thj">桃花鸡</li>
         <li  m="yyj">耶耶鸡</li>
         <li  m="xnj">新年鸡</li>
         <li  m="xjj">仙剑鸡</li>
         <li  m="jjj">尖叫鸡</li>
         <li  m="mrj">某人鸡</li>
         <li  m="hxj">欢喜鸡</li>
       </ul>
      </div>
      
   </body>
      
      
       
      <audio src="./mp3/j.mp3"  class="ji" id="audio"></audio>
   
       
     
    
    
 
     <script>



var audio = document.getElementById('audio');

var lis = document.querySelectorAll('ul.jj li');
lis.forEach(li => {
    li.onclick = function() {
        audio.src = './mp3/'+ this.getAttribute('m') + '.mp3';
        audio.play();
        console.log(this.innerHTML)
    }
});

     </script>

</body>
</html>